<template>
    <div>
        <!-- 设置一个容器合适大小 -->
        <div id="D" style="width: 100vw;height:100vh;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            Dlist: [],
        }
    },
    methods: {
        //初始化容器
        initEcharts() {
            const myChart = this.$echarts.init(document.getElementById('D'));
            const seriesdata = [];
            for (let i = 0; i < this.Dlist.length; i++) {
                const item = this.Dlist[i];
                let series = {
                    name: item.city,
                    ShadowRoot: true,//显示背景色
                    type: 'line',//折线图
                    stack: 'Total',//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
                    data: item.content.map((item) => { return item.area }),
                    smooth: true

                }
                seriesdata.push(series)
            }
            myChart.setOption({
                title: { text: '主要地区农作物增长趋势' },
                trigger: 'axis',//类型触发提示框,
                legend: {
                    data: this.Dlist.map((item) => { return item.city }),
                  
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,//坐标轴两边留白策略
                    data: this.Dlist[0].content.map((item) => { return item.month })
                },
                yAxis: {
                    type: 'value',
                },
                series: seriesdata,
                lineStyle: {
                }
            });
        },
        getD() {
            this.$http('/api/CropGrowthTrend', 'get').then(res => {
                console.log(res);
                this.Dlist = res
                this.initEcharts()
            }).catch(err => {
                console.log(err)
            })
        },
    },
    mounted() {
        this.getD()

    }
}
</script>

<style lang="less" scoped></style>